import React from 'react'
import './index.scss'
export default function Pannel(props) {
    const {title}  = props
    // 接收父组件传递的插槽  props.children
    // 获取插槽数组:如果父组件没有传插槽 []
    // 如果父组件传递了一段html标签  [{}]
    // 如果父组件传递了多个 html标签 [{},{},{}]
    const children = React.Children.toArray(props.children)
    // 具名插槽过滤 ==标题的右边
    const doChildrens = children.filter(item=>item.props.slot=='do')

    // 匿名插槽过滤==放在内容区域
    const defaultChildren = children.filter(item=>item.props.slot==undefined)
  return (
    <div className="pannel">
        
        <div className="title">
            <div className="title-text">
                {title}
            </div>
            <div className="do">
                {doChildrens.map(item=>item)}
            </div>
        </div>
        <div className="content">
            {defaultChildren.map(item=>item)}
        </div>
        </div>
  )
}
